<template>
  <el-drawer
    v-model="show_edit_right_box"
    direction="rtl"
    size="80%"
    :close-on-click-modal="false"
    @close="EventBus.emit('close_edit_right_box')"
  >
    <template #title>
      <div>
        <h4>编辑按钮权限</h4>
        <div class="top_btn">
          <div v-for="(item, index) in right_list" :key="item.id">
            <div
              v-if="item.checked"
              class="cp"
              :class="right_index == index ? 'select_right' : ''"
              @click="(right_index = index), get_select_option_list();"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <el-divider style="margin-top: 10px"></el-divider>
      </div>
    </template>
    <template #default>
      <div>
        <p>
          请选择 <b>{{ right_list[right_index].name }}</b> 所需的字段
        </p>
        <b>提示：操作选项后需保存方可生效</b>
        <div class="title m_10_0" v-if="right_index > 1">
          按钮前置条件 (当条件满足时展示按钮)
        </div>
        <div class="m_top10" v-if="right_index > 1">
          <div class="border p_10">
            <el-table
              border
              :data="pre_table_list"
              style="width: 100%; margin-top: 10px"
              max-height="600px"
            >
              <el-table-column label="字段选择">
                <template #default="scope">
                  <el-select
                    style="margin-top: 10px"
                    v-model="scope.row.code"
                    @change="(e) => change_pre_conditions(e, scope.$index)"
                    placeholder="请选择参数"
                  >
                    <el-option
                      v-for="item in select_option_list"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="字段code" prop="code"> </el-table-column>
              <el-table-column label="值">
                <template #default="scope">
                  <selector
                    class="m_left10"
                    :item1="scope.row.item"
                    :selector_type="'right'"
                  ></selector>
                </template>
              </el-table-column>
              <el-table-column label="相邻字段间关联关系">
                <template #default="scope">
                  <el-select
                    v-if="scope.$index < pre_table_list.length - 1"
                    v-model="scope.row.relate"
                    placeholder="关联关系"
                    style="width: 100px"
                  >
                    <el-option label="并且" value="&&"></el-option>
                    <el-option label="或者" value="||"></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
            <el-button style="margin-top: 10px" @click="add_row">追加行</el-button>
          </div>
        </div>
        <el-divider style="margin-top: 10px"></el-divider>
        <div class="title m_10_0">按钮操作参数</div>
        <el-select
          v-model="btn_operate_conditions"
          multiple
          @change="change_operate_conditions"
        >
          <el-option
            v-for="item in select_option_list"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
        <el-table
          border
          :data="operate_tabel_data"
          style="width: 100%; margin-top: 10px"
          max-height="600px"
        >
          <el-table-column label="字段名称" prop="name"> </el-table-column>
          <el-table-column label="字段code" prop="code"> </el-table-column>
          <el-table-column
            :label="
              '是否指定值( 是 则 ' + right_list[right_index].name + ' 时该字段只读)'
            "
          >
            <template #default="scope">
              <div class="flex">
                <el-switch
                  class="fs0"
                  inline-prompt
                  v-model="scope.row.is_special_value"
                  active-text="是"
                  inactive-text="否"
                />
                <selector
                  class="m_left10 fs1"
                  v-if="scope.row.is_special_value"
                  :item1="scope.row"
                ></selector>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex_cc m_top10">
          <el-button type="primary" @click="save_right">保存</el-button>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, toRefs, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import selector from "./selector.vue";
import EventBus from "@/utils/EventBus";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  show_edit_right_box: Boolean,
  form_list: Array,
  right_list: Array,
});
const { show_edit_right_box, form_list, right_list } = toRefs<any>(props);
const right_index = ref(0);
const pre_table_list = ref([]);
const add_row = () => {
  if (
    pre_table_list.value.some((i) => {
      return i.code == "" || i.item.value == "";
    })
  ) {
    ElMessage.warning("请为每一行选择字段值");
    return;
  }
  let obj = {
    code: "",
    value: "",
    relate: "||",
    item: {},
  };
  pre_table_list.value.push(obj);
};
const delete_pre_group = () => {
  ElMessageBox.confirm("删除将不保留尾项的条件配置", "", {
    cancelButtonText: "取消",
    confirmButtonText: "确定",
    closeOnClickModal: false,
    type: "warning",
  })
    .then(() => {
      pre_table_list.value.splice(-2);
    })
    .catch(() => {});
};
right_list.value.some((item, index) => {
  if (item.checked) {
    right_index.value = index;
  }
  return item.checked;
});
// 前置条件数据
const change_pre_conditions = (...e) => {
  console.log(e);
  let item = select_option_list.value.filter((ii) => {
    return ii.code == e[0];
  });
  pre_table_list.value[e[1]].item = JSON.parse(JSON.stringify(item[0]));
};
// 按钮操作数据
const btn_operate_conditions = ref([]);
const operate_tabel_data = ref([]);
const change_operate_conditions = (e) => {
  console.log(e);
  operate_tabel_data.value = operate_tabel_data.value.filter((item) => {
    return e.includes(item.code);
  });
  select_option_list.value.forEach((item) => {
    if (
      e.includes(item.code) &&
      !operate_tabel_data.value.some((item1) => {
        return item1.code == item.code;
      })
    ) {
      operate_tabel_data.value.push(JSON.parse(JSON.stringify(item)));
    }
  });
};
const save_right = () => {
  console.log(right_list.value);
  pre_table_list.value.forEach((i) => {
    i.value = i.item.value;
  });
  operate_tabel_data.value.forEach((i) => {
    i.is_right = true;
  });
  let arr = store.state.customForm_right_list;
  let obj = {
    right_code: right_list.value[right_index.value].right_code,
    right_name: right_list.value[right_index.value].name,
    right_method: right_list.value[right_index.value].right_method,
    right_type: right_list.value[right_index.value].right_type,
    pre_right_data: pre_table_list.value,
    operate_right_data: operate_tabel_data.value,
  };
  let has_right = false;
  arr.forEach((item) => {
    if (item.right_code == obj.right_code) {
      has_right = true;
      item.pre_right_data = obj.pre_right_data;
      item.operate_right_data = obj.operate_right_data;
    }
  });
  console.log(arr);
  if (!has_right) {
    arr.push(obj);
  }
  store.commit("set_customForm_right_list", arr);
  ElMessage.success("操作成功！");
};
watch(
  () => show_edit_right_box.value,
  (a, b) => {
    if (a) {
      right_index.value = 0;
      get_select_option_list();
    }
  }
);
const select_option_list = ref([]);
const get_select_option_list = () => {
  btn_operate_conditions.value = [];
  pre_table_list.value = [];
  operate_tabel_data.value = [];
  // 数据回填
  let arr = JSON.parse(
    JSON.stringify(
      store.state.customForm_right_list.filter((itme) => {
        return itme.right_code == right_list.value[right_index.value].right_code;
      })
    )
  );
  console.log(arr);
  if (arr.length) {
    pre_table_list.value = arr[0].pre_right_data;
    operate_tabel_data.value = arr[0].operate_right_data;
    arr[0].operate_right_data.forEach((item) => {
      btn_operate_conditions.value.push(item.code);
    });
  }
  // 扁平所有表单的 所有控件配置
  let list = JSON.parse(JSON.stringify(form_list.value));
  select_option_list.value = [];
  list.forEach((i) => {
    i.layout_list.forEach((ii) => {
      ii.children_list.forEach((iii) => {
        if (iii.code) {
          iii.relate = "&&";
          iii.is_special_value = false;
          select_option_list.value.push(JSON.parse(JSON.stringify(iii)));
        }
      });
    });
  });
  console.log(select_option_list.value);
};
</script>

<style lang="scss" scoped>
.pre_group_box {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .pre_table_list {
    display: flex;
    align-items: center;
    > div {
      margin-right: 20px;
    }

    > div:nth-child(odd) {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border: 1px solid #ccc;
    }
    .pre_group_select {
      color: #3580eb !important;
      border-color: #3580eb !important;
    }
  }
}

.top_btn {
  display: flex;
  align-items: center;
  margin: 10px 0;
  .cp {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid #ccc;
    margin-right: 20px;
    img {
      width: 10px;
      height: 10px;
      margin-left: 10px;
    }
  }
  .select_right {
    border: 1px solid #3580eb;
    color: #3580eb;
  }
}
</style>
